<template>
  <div class="s-OpenStatistics echart-content">
    <div class="title-content">
      <dsfimg :src="logoimg" :errorSrc="config.setting_img" />
    </div>
    <div class="echart-content">
      <div class="opendata-box">
        <div class="item">
          <h6>开发目录数</h6>
          <p>{{ state.cataOnlineNum }}</p>
        </div>
        <div class="item">
          <h6>访问量</h6>
          <p>{{ state.totalVisitedNum }}</p>
        </div>
        <div class="item">
          <h6>今日登录数</h6>
          <p>{{ state.otherNum }}</p>
        </div>
        <div class="item">
          <h6>资源申请量</h6>
          <p>{{ state.totalApplyNum }}</p>
        </div>
        <div class="item">
          <h6>资源对接量</h6>
          <p>{{ state.cataJoinNum }}</p>
        </div>
      </div>
      <div class="openechart-box">
        <div class="itembox-row itembox-row3">
          <div class="item-left">
            <div class="e-item">
              <p>平台访问历史</p>
              <div class="item" :id="AccessHistoryid"></div>
            </div>
          </div>
          <div class="item-right">
            <div class="e-item">
              <p>资源对接统计</p>
              <div class="item" :id="ResourcesTotalid"></div>
            </div>
            <div class="e-item">
              <p>资源目录收藏榜</p>
              <div class="item" :id="queryCollectNumid"></div>
            </div>
          </div>
        </div>
        <div class="itembox-row itembox-row2">
          <div class="e-item">
            <p>可开放目录数</p>
            <div class="item" :id="QueryOpenCatalogNumid"></div>
          </div>
          <div class="e-item">
            <p>资源格式比例</p>
            <div class="item" :id="ResourcesFormatid"></div>
          </div>
        </div>
        <div class="itembox-row itembox-row1">
          <div class="e-item">
            <p>主题资源目录统计</p>
            <div class="item" :id="QueryGovResourceNumid"></div>
          </div>
        </div>
        <div class="itembox-row itembox-row2">
          <div class="e-item">
            <p>数据交换TOP10</p>
            <div class="item" :id="QueryDataTopid"></div>
          </div>
          <div class="e-item">
            <p>API调用TOP10</p>
            <div class="item" :id="QueryApiTopid"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, inject, onBeforeUnmount } from "vue";
import logoimg from "@/assets/imgs/pc/opentotle/echartlogo.png";
const http = inject("ajax");
const config = inject("config");
const echarts = inject("echarts");

const OpenDate = {};
let state = ref(OpenDate);

let chartsAccessHistory = "";
const AccessHistoryid = ref("echart" + Date.now() + Math.random()); //记得return Chart
let ResourcesTotal = "";
const ResourcesTotalid = ref("echart" + Date.now() + Math.random()); //记得return Chart
let queryCollectNum = "";
const queryCollectNumid = ref("echart" + Date.now() + Math.random()); //记得return Chart
let QueryOpenCatalogNum = "";
const QueryOpenCatalogNumid = ref("echart" + Date.now() + Math.random()); //记得return Chart
let ResourcesFormat = "";
const ResourcesFormatid = ref("echart" + Date.now() + Math.random()); //记得return Chart
let QueryGovResourceNum = "";
const QueryGovResourceNumid = ref("echart" + Date.now() + Math.random()); //记得return Chart
let QueryDataTop = "";
const QueryDataTopid = ref("echart" + Date.now() + Math.random()); //记得return Chart
let QueryApiTop = "";
const QueryApiTopid = ref("echart" + Date.now() + Math.random()); //记得return Chart

onMounted(() => {
  topStatistics();
  getAccessHistory(); //访问历史
  getResourcesTotal(); //资源对接统计
  getQueryCollectNum(); //资源目录收藏榜
  getQueryOpenCatalogNum(); //可开放目录数
  getResourcesFormat(); //资源格式比例
  getQueryGovResourceNum(); //主题资源目录统计
  getQueryDataTop(); //数据交换TOP10
  getQueryApiTop(); //API调用TOP10

  window.onresize = function () {
    chartsAccessHistory.resize();
    ResourcesTotal.resize();
    queryCollectNum.resize();
    QueryOpenCatalogNum.resize();
    ResourcesFormat.resize();
    QueryGovResourceNum.resize();
    QueryDataTop.resize();
    QueryApiTop.resize();
  };
});

const topStatistics = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/topStatistics", {}, "GET")
    .then(res => {
      state.value = res.data[0];
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};

const getAccessHistory = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/queryvisitedhistorynum", {}, "GET")
    .then(res => {
      let sd = res.data;
      chartsAccessHistory = echarts.init(document.getElementById(AccessHistoryid.value));
      chartsAccessHistory.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: [
            { name: sd.scode1, textStyle: { color: "#fff" } },
            { name: "资源访问次数", textStyle: { color: "#fff" } },
          ],
        },
        toolbox: {},
        grid: {
          left: "3%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: sd.stime.reverse(),
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "资源访问次数",
            type: "line",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top",
              },
            },
            itemStyle: {
              normal: {
                color: "red",
              },
            },
            areaStyle: { normal: {} },
            data: sd.num2.reverse(),
            smooth: true,
          },
          {
            name: "平台访问次数",
            type: "line",
            stack: "总量",
            itemStyle: {
              normal: {
                color: "green",
              },
            },
            areaStyle: { normal: {} },
            data: sd.num1.reverse(),
            smooth: true,
          },
        ],
      });
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
const getResourcesTotal = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/statistics/getTotalNum", {}, "GET")
    .then(res => {
      let sd = res.data[0];
      ResourcesTotal = echarts.init(document.getElementById(ResourcesTotalid.value));
      ResourcesTotal.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{b} ：  {c} ",
        },
        grid: {
          top: "3%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["数据集", "文件", "接口"],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: "30",
            data: [sd.dataJoinNum, sd.fileJionNum, sd.interJoinNum],
          },
        ],
      });
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
const getQueryCollectNum = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/queryCollectNum", {}, "GET")
    .then(res => {
      var sd = res.data.collectnum;
      var textarrbox = [];
      var textardata = {};

      var filearrbox = [];
      var filedata = {};
      for (var i = 0, len = sd.length; i < len; i++) {
        if (sd[i].name.length > 10) {
          sd[i].name = sd[i].name.substr(0, 10) + "...";
        }

        textardata = {
          name: sd[i].name,
          textStyle: { color: "#fff" },
        };
        textarrbox.push(textardata);

        filedata = {
          value: sd[i].cotnum,
          name: sd[i].name,
        };
        filearrbox.push(filedata);
      }

      queryCollectNum = echarts.init(document.getElementById(queryCollectNumid.value));
      queryCollectNum.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: textarrbox,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: filearrbox,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
const getQueryOpenCatalogNum = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/queryOpenCatalogNum", {}, "GET")
    .then(res => {
      var sd = res.data;
      var montharr = [];
      for (var i = 1; i < 13; i++) {
        montharr.push(i + "月");
      }

      QueryOpenCatalogNum = echarts.init(document.getElementById(QueryOpenCatalogNumid.value));
      QueryOpenCatalogNum.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: montharr,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "可开放目录数",
            type: "bar",
            barWidth: "60%",
            data: sd.num,
          },
        ],
      });
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
const getResourcesFormat = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/statistics/getTotalNum", {}, "GET")
    .then(res => {
      let sd = res.data[0];

      ResourcesFormat = echarts.init(document.getElementById(ResourcesFormatid.value));
      ResourcesFormat.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: [
            { name: "接口", textStyle: { color: "#fff" } },
            { name: "文件", textStyle: { color: "#fff" } },
            { name: "数据集", textStyle: { color: "#fff" } },
          ],
        },
        series: [
          {
            name: "资源格式",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "50%"],
            color: ["#0E7CE2", "#FF8352", "#E271DE"],
            data: [
              { value: sd.interOnlineNum, name: "接口" },
              { value: sd.fileOnlineNum, name: "文件" },
              { value: sd.dataOnlineNum, name: "数据集" },
            ],
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 20,
                lineStyle: {
                  color: "#12EABE",
                  width: 2,
                },
              },
            },
            label: {
              normal: {
                formatter: "{c|{b}}\n{d|{d}%}",
                rich: {
                  b: {
                    fontSize: 16,
                    color: "#fff",
                    align: "left",
                    padding: 4,
                  },
                  d: {
                    fontSize: 16,
                    color: "#fff",
                    align: "left",
                    padding: 2,
                  },
                  c: {
                    fontSize: 16,
                    color: "#fff",
                    align: "left",
                    padding: 2,
                  },
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold",
                },
              },
            },
          },
        ],
      });
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
const getQueryGovResourceNum = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/queryGovResourceNum", {}, "GET")
    .then(res => {
      let sd = res.data;

      QueryGovResourceNum = echarts.init(document.getElementById(QueryGovResourceNumid.value));
      QueryGovResourceNum.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: [
            { name: "接口", textStyle: { color: "#fff" } },
            { name: "数据集", textStyle: { color: "#fff" } },
            { name: "文件", textStyle: { color: "#fff" } },
          ],
        },
        xAxis: [
          {
            type: "category",
            data: sd.datanum.name.slice(0, 10),
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#00C1DE",
              },
            },
            axisLabel: {
              interval: 0, //横轴信息全部显示
              rotate: -15, //-30度角倾斜显示
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "数据：个",
            interval: 100,
            axisLine: {
              lineStyle: {
                color: "#00C1DE",
              },
            },
          },
        ],
        series: [
          {
            name: "接口",
            type: "bar",
            data: sd.internum.num.slice(0, 10),
            itemStyle: {
              normal: {
                color: "#D69166",
              },
            },
          },
          {
            name: "数据集",
            type: "bar",
            data: sd.datanum.num.slice(0, 10),
            itemStyle: {
              normal: {
                color: "#3C9B92",
              },
            },
          },
          {
            name: "文件",
            type: "bar",
            data: sd.filenum.num.slice(0, 10),
            itemStyle: {
              normal: {
                color: "#2ba5ff",
              },
            },
          },
        ],
      });
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
const getQueryDataTop = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/queryDataTop", {}, "GET")
    .then(res => {
      var sd = res.top;
      var totalarr = [],
        totaltextarr = [];

      for (var i = 0, len = sd.length; i < len; i++) {
        totalarr.push(sd[i].total);
        if (sd[i].name.length > 10) {
          totaltextarr.push(sd[i].name.substr(0, 10) + "...");
        } else {
          totaltextarr.push(sd[i].name);
        }
      }

      QueryDataTop = echarts.init(document.getElementById(QueryDataTopid.value));
      QueryDataTop.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: [{ name: "2012年", textStyle: { color: "#fff" } }],
        },
        grid: {
          top: "3%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "category",
          data: totaltextarr.reverse(),
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: "16",
            label: {
              normal: {
                textStyle: {
                  color: "rgba(255, 255, 255, 0.3)",
                },
              },
            },
            data: totalarr.reverse(),
            itemStyle: {
              normal: {
                color: "#7D96BA",
              },
            },
          },
        ],
      });
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
const getQueryApiTop = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/queryApiTop", {}, "GET")
    .then(res => {
      var sd = res.top;
      var totalarr = [],
        totaltextarr = [];
      for (var i = 0, len = sd.length; i < len; i++) {
        totalarr.push(sd[i].total);
        if (sd[i].name.length > 10) {
          totaltextarr.push(sd[i].name.substr(0, 10) + "...");
        } else {
          totaltextarr.push(sd[i].name);
        }
      }

      QueryApiTop = echarts.init(document.getElementById(QueryApiTopid.value));
      QueryApiTop.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: [{ name: "2011年", textStyle: { color: "#fff" } }],
        },
        grid: {
          top: "3%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "category",
          data: totaltextarr.reverse(),
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: "16",
            data: totalarr.reverse(),
            itemStyle: {
              normal: {
                color: "#7D96BA",
              },
            },
          },
        ],
      });
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
</script>
